<template>
    <div>
        <!-- 产品搜索和添加 -->

        <!--
            el-form
              inline="true" 为行内的表单
              model="formInline"  表单数据对象  object

            el-form-item 表单控件 每一项内容
              
            v-model="formInline.user" 获取forminline的内容绑定上来

            el-date-picker 日期组件
          -->
        <div class="header">
            <div class="form">
                <el-form :inline="true" :model="formInline" class="demo-form-inline">
                    <el-form-item label="部门名称">
                        <el-input v-model="formInline.user" size="small" placeholder="部门名称"></el-input>
                    </el-form-item>
                    <el-form-item label="添加时间">
                        <div class="block">
                            <el-date-picker v-model="formInline.data" size="small" align="right" type="date"
                                placeholder="选择日期" :picker-options="pickerOptions">
                            </el-date-picker>
                        </div>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" size="small" @click="onSubmit">查询</el-button>
                    </el-form-item>
                </el-form>
            </div>


            <div class="group">
                <el-button size="small" type="warning" icon="el-icon-plus" @click="toProductPage">添加部门</el-button>
                <el-button size="small" type="danger" icon="el-icon-delete">批量删除</el-button>
            </div>
        </div>
        <!-- 产品列表 -->
        <!-- 
            当el-table元素中注入data对象数组（tableData）后，
            在el-table-column中用prop属性来对应对象中的键名即可填入数据，
            用label属性来定义表格的列名。可以使用width属性来定义列宽。 
        -->
        <!-- 
            stripe 斑马纹  border 边框 fixed 固定列 scope 能拿到操作行的数据
         -->
        <div class="content" >
            <el-table :data="tableData" style="width: 100%;" border header-cell-class-name="table-center"
                cell-class-name="table-center">
                <el-table-column type="selection" width="55">
                </el-table-column>
                <el-table-column fixed prop="id" label="部门编号" width="120">
                </el-table-column>
                <el-table-column prop="commodityName" label="部门名称" width="120" show-overflow-tooltip>
                </el-table-column>
                <el-table-column label="添加时间" prop="createTime">
                    <!-- <template slot-scope="scope">
                        <span>{{ moment(scope.row.create_time).format('YYYY-MM-DD hh:mm:ss') }}</span>
                    </template> -->
                </el-table-column>
                <el-table-column label="操作" width="200">
                    <template slot-scope="scope">
                        <!-- <el-button size="mini" type="primary" @click="handleEdit(scope.$index, scope.row)"
                            icon="el-icon-edit">编辑</el-button> -->
                        <el-button type="primary" size="mini" icon="el-icon-edit"
                            @click="dialogFormVisible = true">编辑</el-button>

                        <el-dialog title="收货地址" :visible.sync="dialogFormVisible" width="500px" center>
                            <el-form :model="form">
                                <el-form-item label="活动名称">
                                    <el-input v-model="form.name" autocomplete="off"></el-input>
                                </el-form-item>
                                <el-form-item label="活动名称">
                                    <el-input v-model="form.address" autocomplete="off"></el-input>
                                </el-form-item>

                            </el-form>
                            <div slot="footer" class="dialog-footer">
                                <el-button @click="dialogFormVisible = false">取 消</el-button>
                                <el-button type="primary" @click="handleEdit(scope.$index, scope.row)">确 定</el-button>
                            </div>
                        </el-dialog>

                        <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)"
                            icon="el-icon-delete">删除</el-button>

                    </template>
                </el-table-column>
            </el-table>
        </div>
        <!-- 分页 -->
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
            :page-sizes="[100, 200, 300, 400]" :page-size="100" layout="total, sizes, prev, pager, next, jumper"
            :total="400">
        </el-pagination>
    </div>
</template>

<script>
// import  Pagination  from '../../../components/pagination.vue';
import moment from 'moment'
import axios from 'axios';
export default {
    components: {
        // Pagination
    },
    data() {
        return {
            formInline: {
                user: '',
                data: ''
            },
            //分页
            currentPage: 1,
            //添加时间
            pickerOptions: {
                disabledDate(time) {
                    return time.getTime() > Date.now();
                },
                shortcuts: [{
                    text: '今天',
                    onClick(picker) {
                        picker.$emit('pick', new Date());
                    }
                }, {
                    text: '昨天',
                    onClick(picker) {
                        const date = new Date();
                        date.setTime(date.getTime() - 3600 * 1000 * 24);
                        picker.$emit('pick', date);
                    }
                }, {
                    text: '一周前',
                    onClick(picker) {
                        const date = new Date();
                        date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
                        picker.$emit('pick', date);
                    }
                }]
            },
            //编辑弹出框
            dialogFormVisible: false,
            form: {
                name: '',
                address: '',
            },
            //弹出框宽度
            formLabelWidth: '120px',
            //formInputWidth:'110px',
            //表单数据
            tableData: [
                // {
                //     date: '2016-05-02',
                //     title: '王小虎',
                //     sellPoint: '上海市普陀区金沙江路 1518 弄'
                // }, {
                //     date: '2016-05-04',
                //     title: '王小虎',
                //     sellPoint: '上海市普陀区金沙江路 1517 弄'
                // }, {
                //     date: '2016-05-01',
                //     title: '王小虎',
                //     sellPoint: '上海市普陀区金沙江路 1519 弄'
                // }, {
                //     date: '2016-05-03',
                //     title: '王小虎',
                //     sellPoint: '上海市普陀区金沙江路 1516 弄'
                // }
            ]

        }

    },
    methods: {
        moment,//注册方法
        //点击添加跳转界面--------
        toProductPage() {
            console.log('添加跳转界面----')
        },
        // onSubmit(){
        // },
        //分页
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
        },
        //查询
        onSubmit() {
            console.log('submit!', this.formInline);
        },
        //编辑确定
        handleEdit(index, row) {
            //form表要传给数据库，看是否成功
            console.log(this.form);
            this.dialogFormVisible = false;
        },
        //删除
        handleDelete(index, row) {
            console.log('删除操作--', index, row);
            this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$message({
                    type: 'success',
                    message: '删除成功!'
                });
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
        // async projectList(page) {
        //     let res = await this.$api.projectList({ page })
        //     console.log('产品列表数据---', res.data);
        // },
        //获取数据
        selectprodata() {
            console.log();
            axios
                .get('https://k1xfy1.i996.me/commodity/getcommoditieslist')
                .then((res) => {
                    this.tableData = res.data.data;
                    console.log(this.tableData)
                    //获取商品有多少条数据
                    this.prolist = res.data.data.length;
                    // console.log(this.prolist)
                },
                    // 失败回调
                    error => {
                        console.log('请求失败！')
                        // 请求失败原因
                        console.log(error.message)
                    }
                )

        },
    },

    created() {
        // this.projectList(1);
        this.selectprodata();
        //console.log('获取当前的时间', new Date(), moment().format('YYYY-MM-DD hh:mm:ss'));
    }

}
</script>



<style lang="less" scoped>
.header {
    background-color: #d4e0f0;
    margin-bottom: 20px;
    padding: 10px;
    border-radius: 10px;

    .el-form-item {
        margin-bottom: 16px;
    }

    .group {
        border: 1px solid #fff;
        padding: 8px;
    }
}

.content {
    background: #c2dde0;

    .el-input {
        width: 70%;
    }

    /deep/ .active-header {
        color: black;
        text-align: center;
    }

    /deep/ .table-center {
        text-align: center;
    }

}
</style>